<template>
  <div class="lb">
      <div>猜你喜欢</div>
      <div class="up">
        <div>综合排序</div>
        <div @click="yuanjin" class="juli">距离最近</div>
        <div @click="liang" class="xiaoliang">销量最高</div>
      </div>
      <div class="down" v-for="(item,index) in shuju" :key="index">
        <div class="tu"></div>
        <div class="text">
          <div>{{item.name}}</div>
          <section>月售 {{item.yueshou}}</section>
          <section>距离 {{item.juli}} km</section>
        </div>
      </div>
  </div>
</template>

<script>

export default {
    data(){
      return{
        xiabiao:0,
        shuju:[
          {yueshou:1632,juli:3,name:'金百万烤鸭'},
          {yueshou:230,juli:2,name:'饺子馆'}
        ]
      }
    },
    methods:{
      yuanjin(){
        this.shuju.sort(function(a,b){
        return (b.juli-a.juli)
      })
      },
      liang(){
        this.shuju.sort(function(a,b){
        return (b.yueshou-a.yueshou)
      })
      }
    }
}
</script>

<style>
  .lb .up{
    display: flex;
    justify-content: space-around;
  }
  .lb .down{
    display: flex;
    margin-top: 10px;
  }
  .lb .down .tu{
    width: 120px;
    background-color: aqua;
  }
  .lb .down .text{
    margin-left: 20px;
  }
  .lb .down .text section{
    margin-top: 10px;
  }
</style>